<template>
  <div>
    <!--工具栏-->
    <div class="crud-group">
      <!-- 搜索 -->
      <el-input
        v-model="paramsForm.sourceName"
        placeholder="源名称"
        clearable
      />

      <el-input
        v-model="paramsForm.dbTbName"
        clearable
        placeholder="库表名"
      />
      <el-input
        v-model="paramsForm.datePartition"
        clearable
        placeholder="日期分区"
      />

      <div style="display: flex;">
        <el-button
          class="filter-item"
          type="success"
          icon="el-icon-search"
          @click="getData()"
        >搜索</el-button>
        <el-button
          class="filter-item"
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset()"
        >重置</el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="()=>{
            addDialogVisible = true
          }"
        >新增</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="isLoading"
      :data="data"
      border
    >
      <el-table-column
        prop="sourceName"
        label="源名称"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dbTbName"
        label="库表名"
        show-overflow-tooltip
        min-width="100px"
      />
      <el-table-column
        prop="sourcePartition"
        label="源分区"
        show-overflow-tooltip
        min-width="100px"
      />
      <el-table-column
        prop="sourceValue"
        label="源分区值"
        show-overflow-tooltip
        min-width="100px"
      />
      <el-table-column
        label="日期分区"
        show-overflow-tooltip
        prop="datePartition"
      />
      <el-table-column
        prop="holdDataMonth"
        label="保留周期（月）"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        width="100px"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="()=>{
              selectedRow = scope.row
              addDialogVisible = true
            }"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            @click="deleteClick(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <!--分页组件-->
      <el-pagination
        :current-page="paramsForm.current"
        :page-size="paramsForm.size"
        layout="prev, pager, next,sizes,total"
        :total="total"
        @size-change="(val)=>{
          paramsForm.size = val
          getData()
        }"
        @current-change="(val)=>{
          paramsForm.current = val
          getData(false)
        }"
      />
    </div>

    <AddDialog
      :dialog-visible="addDialogVisible"
      :edit-form="selectedRow"
      @close="()=>{
        addDialogVisible = false
        getData()
        selectedRow = null
      }"
    />
  </div>
</template>

<script>
import logApi from '@/api/logAnalysis/index'
import { MessageBox } from 'element-ui'
import AddDialog from './AddDialog.vue'

const form = {
  size: 10,
  current: 1,
  sourceName: '',
  dbName: '',
  tbName: '',
  dbTbName: '',
  datePartition: '',
  holdDataMonth: ''
}
export default {
  name: 'DataDesensitizationRules',
  components: {AddDialog},
  data() {
    return {
      total: 0,
      paramsForm: {...form},
      data: [],
      isLoading: false,
      addDialogVisible: false,
      selectedRow: null
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(resetPage = true) {
      if (resetPage) {
        this.paramsForm.current = 1
      }
      this.isLoading = true
      logApi.getTableSyncConfs(this.paramsForm)
        .then((data) => {
          this.total = data.total
          this.data = data.records
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    reset() {
      this.paramsForm = {...form}
      this.getData()
    },
    deleteClick(row) {
      MessageBox.confirm('此操作将永久删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        logApi.delTableSyncConf(row.id).then(() => {
          this.getData()
        })
      })
    }
  }
}
</script>
